/* stylelint-disable import-notation */
@import 'tailwindcss';
@import './tokens.css';

@plugin '@formkit/themes/tailwindcss';
@plugin '../../../build/zammadTailwindPlugin.js';

:root {
  /* LIMITED support -> opt in modern browsers @see https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size */

  /* allows animating of intrinsic absolute <-> relative units */
  interpolate-size: allow-keywords;
}

@layer base {
  html {
    --safe-bottom: env(safe-area-inset-bottom);
  }

  [type='text'],
  [type='password'],
  [type='email'],
  [type='number'],
  [type='url'],
  [type='date'],
  [type='datetime-local'],
  [type='time'],
  [type='search'],
  [type='tel'],
  select,
  select[multiple] {
    @apply p-2;
  }

  textarea {
    @apply px-2 py-1;
  }

  /* Override autofill styles in Firefox. */
  :-moz-autofill {
    background: transparent;
  }

  /* Override autofill styles in Webkit-based browsers. */
  :-webkit-autofill {
    -webkit-text-fill-color: white;
    -webkit-background-clip: text;
    caret-color: white;
  }

  /* No-op animation for hooking into autofill mechanism in Webkit-based browsers. */
  :-webkit-autofill {
    animation-name: onAutoFillStart;
  }

  :not(:-webkit-autofill) {
    animation-name: onAutoFillEnd;
  }

  @keyframes onAutoFillStart {
    from {
    }

    to {
    }
  }

  @keyframes onAutoFillEnd {
    from {
    }

    to {
    }
  }
}

@layer components {
  .absolute-floating-input:focus-within label,
  .absolute-floating-input.formkit-outer[data-populated] label {
    @apply -translate-y-2 scale-75 opacity-75 after:scale-[1.3] ltr:translate-x-[2px] rtl:pt-5 rtl:pb-0 rtl:text-xs;
  }

  .floating-input.formkit-outer[data-populated] label {
    @apply scale-100! text-xs opacity-75;
  }

  .floating-textarea:focus-within label,
  .floating-textarea.formkit-outer[data-populated] label {
    @apply translate-y-1.5! text-xs! opacity-75!;
  }

  .form-group {
    &.form-group-mark-dirty .formkit-outer[data-dirty]::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 0.25rem;
      background: repeating-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0.1) 5px,
          transparent 5px,
          transparent 9px
        )
        repeat center;
      background-size: 11px 11px;
    }

    .formkit-outer:not(:last-child) {
      > :last-child {
        @apply border-b border-[rgba(255,255,255,0.1)];
      }
    }
  }

  .Content,
  .ProseMirror {
    div[data-signature-marker] {
      display: none;
    }

    &:focus-visible {
      outline: none;
    }

    p {
      @apply my-2 min-h-5;
    }

    blockquote {
      @apply border-l-5 border-l-gray-300 px-3 py-px;

      .Agent & {
        @apply border-l-gray-100;
      }

      .Customer & {
        @apply border-l-blue-dark;
      }
    }

    ol {
      list-style: decimal;
    }

    ul {
      list-style: disc;
    }

    ol,
    ul {
      @apply pb-2;

      padding-inline-start: 0.5rem;
      list-style-position: inside;

      p {
        display: inline;
      }
    }

    h1 {
      @apply mt-2 mb-1 text-2xl font-bold;
    }

    h2 {
      @apply mt-2 mb-1 text-xl font-bold;
    }

    h3 {
      @apply mt-2 mb-1 text-lg font-bold;
    }

    a {
      @apply text-blue;

      .Customer & {
        @apply text-black underline;
      }
    }

    [dir='rtl'] {
      text-align: right;
    }

    [dir='ltr'] {
      text-align: left;
    }

    pre {
      @apply bg-black-full/20 rounded-md my-2 p-2.5;

      code {
        @apply bg-transparent p-0;
      }
    }

    code {
      @apply bg-black-full/20 font-mono rounded-md p-0.75;
    }

    table.zammad-table,
    &:not(.Content) table {
      @apply max-w-full border-2 border-gray-200 border-collapse table-fixed w-full my-2 overflow-hidden;

      .Agent & {
        @apply border-gray;
      }

      .Customer & {
        @apply border-blue-dark;
      }

      td,
      th {
        @apply min-w-[1em] border border-gray-200 align-top relative py-[3px] px-[5px] box-border;

        .Agent & {
          @apply border-gray;
        }

        .Customer & {
          @apply border-blue-dark;
        }
      }

      th {
        @apply font-bold text-start bg-black-full/20;

        .Agent & {
          @apply bg-black-full/10;
        }
      }
    }

    table td,
    table th {
      > * {
        @apply m-0;
      }
    }

    hr {
      @apply my-2 h-px bg-gray text-[0px] border-none;

      .Customer & {
        @apply bg-blue-dark;
      }
    }
  }

  /*
    Reset styles for nested tables in blockquotes and signatures.
      There is currently no way to determine whether they are internal or external.
      These tables will not be assigned `zammad-table` class on submission anyway.
      We need to increase specificity to override the base styles, therefore we repeat the wrapper selector.
  */
  .ProseMirror blockquote .tableWrapper.tableWrapper.tableWrapper table,
  .ProseMirror [data-signature='true'] .tableWrapper.tableWrapper table {
    @apply max-w-none border-1 border-gray-200/60 table-auto w-auto m-0 overflow-auto;

    td,
    th {
      @apply min-w-auto border-gray-200/60;
    }

    th {
      @apply bg-transparent;
    }
  }

  .content:not(.Agent),
  .ProseMirror {
    /* neutral 1 */
    [style*='color:rgb(102, 102, 102)'],
    [style*='color: rgb(102, 102, 102)'] {
      color: rgb(204, 204, 204) !important;
    }

    /* neutral 2 is the same for both themes */

    /* neutral 3 */
    [style*='color:rgb(204, 204, 204)'],
    [style*='color: rgb(204, 204, 204)'] {
      color: rgb(102, 102, 102) !important;
    }

    /* red 1 */
    [style*='color:rgb(239, 68, 68)'],
    [style*='color: rgb(239, 68, 68)'] {
      color: rgb(241, 152, 167) !important;
    }

    /* orange 1 */
    [style*='color:rgb(205, 121, 45)'],
    [style*='color: rgb(205, 121, 45)'] {
      color: rgb(246, 211, 102) !important;
    }

    /* green 1 */
    [style*='color:rgb(80, 140, 70)'],
    [style*='color: rgb(80, 140, 70)'] {
      color: rgb(170, 214, 164) !important;
    }

    /* blue 1 */
    [style*='color:rgb(48, 100, 172)'],
    [style*='color: rgb(48, 100, 172)'] {
      color: rgb(122, 202, 247) !important;
    }

    /* purple 1 */
    [style*='color:rgb(107, 41, 132)'],
    [style*='color: rgb(107, 41, 132)'] {
      color: rgb(201, 135, 236) !important;
    }

    /* red 2 */
    [style*='color:rgb(235, 61, 79)'],
    [style*='color: rgb(235, 61, 79)'] {
      color: rgb(237, 97, 118) !important;
    }

    /* orange 2 */
    [style*='color:rgb(233, 159, 59)'],
    [style*='color: rgb(233, 159, 59)'] {
      color: rgb(243, 193, 79) !important;
    }

    /* green 2 */
    [style*='color:rgb(95, 159, 84)'],
    [style*='color: rgb(95, 159, 84)'] {
      color: rgb(127, 187, 118) !important;
    }

    /* blue 2 */
    [style*='color:rgb(70, 147, 231)'],
    [style*='color: rgb(70, 147, 231)'] {
      color: rgb(91, 174, 243) !important;

      .Customer & {
        mix-blend-mode: multiply;
      }
    }

    /* purple 2 */
    [style*='color:rgb(153, 62, 195)'],
    [style*='color: rgb(153, 62, 195)'] {
      color: rgb(179, 91, 223) !important;
    }

    /* red 3 */
    [style*='color:rgb(237, 97, 118)'],
    [style*='color: rgb(237, 97, 118)'] {
      color: rgb(235, 61, 79) !important;
    }

    /* orange 3 */
    [style*='color:rgb(243, 193, 79)'],
    [style*='color: rgb(243, 193, 79)'] {
      color: rgb(233, 159, 59) !important;
    }

    /* green 3 */
    [style*='color:rgb(127, 187, 118)'],
    [style*='color: rgb(127, 187, 118)'] {
      color: rgb(95, 159, 84) !important;

      .Customer & {
        mix-blend-mode: multiply;
      }
    }

    /* blue 3 */
    [style*='color:rgb(91, 174, 243)'],
    [style*='color: rgb(91, 174, 243)'] {
      color: rgb(70, 147, 231) !important;

      .Customer & {
        mix-blend-mode: multiply;
      }
    }

    /* purple 3 */
    [style*='color:rgb(179, 91, 223)'],
    [style*='color: rgb(179, 91, 223)'] {
      color: rgb(153, 62, 195) !important;
    }

    /* red 4 */
    [style*='color:rgb(241, 152, 167)'],
    [style*='color: rgb(241, 152, 167)'] {
      color: rgb(239, 68, 68) !important;
    }

    /* orange 4 */
    [style*='color:rgb(246, 211, 102)'],
    [style*='color: rgb(246, 211, 102)'] {
      color: rgb(205, 121, 45) !important;
    }

    /* green 4 */
    [style*='color:rgb(170, 214, 164)'],
    [style*='color: rgb(170, 214, 164)'] {
      color: rgb(80, 140, 70) !important;
    }

    /* blue 4 */
    [style*='color:rgb(122, 202, 247)'],
    [style*='color: rgb(122, 202, 247)'] {
      color: rgb(48, 100, 172) !important;
    }

    /* purple 4 */
    [style*='color:rgb(201, 135, 236)'],
    [style*='color: rgb(201, 135, 236)'] {
      color: rgb(107, 41, 132) !important;
    }
  }

  .file-list.show-gradient::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.25rem;
    height: 30px;
    pointer-events: none;
  }

  .file-list.bottom-gradient::before {
    bottom: 1.25rem;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--color-gray-500));
  }

  .file-list.top-gradient::before {
    top: 0;
    background: linear-gradient(var(--color-gray-500), rgba(255, 255, 255, 0));
  }
}

@utility pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

@utility mb-safe {
  margin-bottom: env(safe-area-inset-bottom);
}

@utility required {
  @apply after:bg-yellow after:ms-1 after:inline-block after:size-1 after:shrink-0 after:self-center after:rounded-full after:align-middle after:leading-0 after:content-[''];
}

@utility ai-stripe {
  &::before {
    content: '';
    height: 2px;
    width: 100%;
    background-image: repeating-linear-gradient(to right, var(--color-blue), var(--color-pink));
  }
}
